<template>
  <teleport to="body">
    <div class="fixed inset-0 bg-gray-500 bg-opacity-40 flex justify-center items-start overflow-y-auto overflow-x-hidden" v-if="prop.dialogVisible" @click.stop="guanbima()">
      <div class="fixed inset-0 z-10"></div>
      <div class="relative z-20 juzhong mt-24 mb-24" @click.stop.prevent>
        <slot></slot>
        <Icon v-if="prop.showclose"
            class="absolute right-1 top-1 group-hover:text-opacity-100 text-opacity-0 group-hover:text-white hover:text-red-500 cursor-pointer"
            size="20" @click.stop="guanbi()">
          <CloseCircle/>
        </Icon>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import {defineProps,defineEmits,watch,nextTick} from "vue"
import {Icon} from '@vicons/utils' // 外壳
import {CloseCircle} from "@vicons/ionicons5"
const prop = defineProps({
  // 状态
  dialogVisible:{
    type:Boolean,
    default: false,
  },
  // 关闭回调
  onClose:{
    type:Function,
    default: ()=>{return true},
  },
  // 关闭图标
  showclose:{
    type:Boolean,
    default:true,
  },
  // 点击遮罩层关闭
  modelclose:{
    type:Boolean,
    default:true,
  },
  // 按esc关闭
  escclose:{
    type:Boolean,
    default:true,
  },
})
const emit = defineEmits(["update:dialogVisible"])
// 关闭弹窗
const guanbi=()=>{
  const jieguo = prop.onClose()
  if(jieguo===false){
    return false
  }
  emit("update:dialogVisible",false)
  emit("close")
}
// 点击遮罩层关闭
const guanbima=()=>{
  if(prop.modelclose){
    guanbi()
  }
}
// 按下esc关闭
const guanbiba=()=>{
  console.log("按下esc键")
  if(prop.escclose){
    guanbi()
  }
}
const m = (e)=>{
  console.log("拦截滑动")
  e.preventDefault();
  e.stopPropagation();
  return false
}
// 让遮罩层下面不能滑动
const stopMove=()=>{
  console.log("禁止滑动")
}
const Move=()=>{
  console.log("启动滑动")
}
// 判断是不是esc按键
const escclose=(e)=>{
  if(e.keyCode===27){
    guanbiba()
  }
}
// 监听esc按键
const jiantingesc=()=>{
  window.addEventListener("keyup",(e)=>{
    escclose(e)
  })
}
const canceljiantingesc = ()=>{
  window.removeEventListener("keyup",(e)=>{
    escclose(e)
  })
}
// 监听状态，打开后就禁止滑动
watch(()=>prop.dialogVisible,()=>{
  if(prop.dialogVisible){
    stopMove()
    if(prop.escclose){
      jiantingesc()
    }
  }else{
    Move()
    if(prop.escclose){
      canceljiantingesc()
    }
  }
})
</script>

<style scoped>

</style>
